<script lang="ts" setup>

</script>

<template>
  <el-skeleton style="width: 18%" animated>
    <template #template>
      <div class="songItem">
        <div class="imgWrap">
          <el-skeleton-item variant="image" style="width: 100%; height: 100%" />
        </div>
        <p class="songListDesc">
          <el-skeleton-item variant="text" style="width: 100%" />
          <el-skeleton-item variant="text" style="width: 100%" />
        </p>
      </div>
    </template>
  </el-skeleton>
</template>

<style lang="scss" scoped>
.songItem {
  position: relative;
  width: 100%;
  margin: 0 10px 15px 0;

  .imgWrap {
    position: relative;
    width: 100%;
    height: 140px;
    overflow: hidden;
  }

  .songListDesc {
    font-family: $textFont;
    font-size: $font-size-sm;
    line-height: 20px;
  }
}

// 骨架屏图片容器设置
@media screen and (min-width: 1100px) {
  .imgWrap {
    height: 150px !important;
  }
}

@media screen and (min-width: 1130px) {
  .imgWrap {
    height: 157px !important;
  }
}

@media screen and (min-width: 1160px) {
  .imgWrap {
    height: 162px !important;
  }
}

@media screen and (min-width: 1190px) {
  .imgWrap {
    height: 164px !important;
  }
}

@media screen and (min-width: 1220px) {
  .imgWrap {
    height: 170px !important;
  }
}

@media screen and (min-width: 1250px) {
  .imgWrap {
    height: 176px !important;
  }
}

@media screen and (min-width: 1280px) {
  .imgWrap {
    height: 182px !important;
  }
}

@media screen and (min-width: 1310px) {
  .imgWrap {
    height: 188px !important;
  }
}

@media screen and (min-width: 1340px) {
  .imgWrap {
    height: 194px !important;
  }
}

@media screen and (min-width: 1370px) {
  .imgWrap {
    height: 200px !important;
  }
}

@media screen and (min-width: 1400px) {
  .imgWrap {
    height: 206px !important;
  }
}

@media screen and (min-width: 1430px) {
  .imgWrap {
    height: 210px !important;
  }
}
</style>
